<template>
  <div class="lb-card-setting">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="cardFrom"
        :rules="cardFromRules"
        ref="cardFrom"
        label-width="140px"
        class="card-form"
      >
        <el-form-item label="分配方式" prop="auto_switch_way">
          <el-radio-group v-model="cardFrom.auto_switch_way">
            <el-radio :label="1">随机</el-radio>
            <el-radio :label="2">顺序</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[1] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="切换职位" prop="job_switch">
          <el-radio-group v-model="cardFrom.job_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[2] }}</lb-tool-tips> </el-form-item
        ><el-form-item label="授权开关" prop="auth_switch">
          <el-radio-group v-model="cardFrom.auth_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启此功能后，当用户在没有授权微信信息的情况下，点击页面常用按钮时将弹出授权提醒</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="强制授权" prop="force_phone">
          <el-radio-group v-model="cardFrom.force_phone">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启此模块，用户进入小程序时需微信授权和授权手机号后才可访问小程序，开启此模块影响用户体验【谨慎开启，建议提交微信审核时关闭此功能！】</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="替换头像" prop="qr_avatar_switch">
          <el-radio-group v-model="cardFrom.qr_avatar_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[3] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item :label="tips[4]" prop="card_type">
          <el-radio-group v-model="cardFrom.card_type">
            <el-radio :label="1">点击向下展开</el-radio>
            <el-radio :label="2">左右滑动模式</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[5] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item :label="tips[6]" prop="exchange_switch">
          <el-radio-group v-model="cardFrom.exchange_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[7] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="个性签名" prop="motto_switch">
          <el-radio-group v-model="cardFrom.motto_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[8] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item :label="tips[14]" prop="dynamic_switch">
          <el-radio-group v-model="cardFrom.dynamic_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[9] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="大图模式" prop="preview_switch">
          <el-radio-group v-model="cardFrom.preview_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启大图模式后，用户点击详情图片可以预览图片，并且可以长按图片识别二维码或者保存</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="聊天功能" prop="chat_switch">
          <el-radio-group v-model="cardFrom.chat_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[10] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="小程序客服系统" prop="im_type">
          <el-radio-group v-model="cardFrom.im_type">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[15] }} </lb-tool-tips>
        </el-form-item>
        <el-form-item label="聊天按钮" prop="btn_consult">
          <el-input
            v-model="cardFrom.btn_consult"
            placeholder="请输入聊天按钮文案"
            maxlength="4"
            show-word-limit
          ></el-input>
          <lb-tool-tips>{{ tips[11] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="客服按钮" prop="im_consult">
          <el-input
            v-model="cardFrom.im_consult"
            placeholder="请输入客服按钮文案"
            maxlength="4"
            show-word-limit
          ></el-input>
          <lb-tool-tips>客户端首页客服按钮文案</lb-tool-tips>
        </el-form-item>
        <el-form-item label="公司文案" prop="company_field">
          <el-input
            v-model="cardFrom.company_field"
            placeholder="请输入公司文案"
            maxlength="4"
            show-word-limit
          ></el-input>
          <lb-tool-tips>{{ tips[16] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="名片分享按钮" prop="share_btn">
          <el-input
            v-model="cardFrom.share_btn"
            placeholder="请输入名片分享按钮文案"
            maxlength="9"
            show-word-limit
          ></el-input>
          <lb-tool-tips>{{ tips[12] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item label="交换手机号" prop="exchange_btn">
          <el-input
            v-model="cardFrom.exchange_btn"
            placeholder="请输入交换的手机号"
            maxlength="9"
            show-word-limit
          ></el-input>
          <lb-tool-tips>{{ tips[13] }}</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="editOrGetFormInfo(1)">{{
            $t('action.submit')
          }}</lb-button>
          <!-- <lb-button @click="resetForm">{{$t('action.reset')}}</lb-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: {
        1: `当新用户通过搜索进入小程序时，会按照此处设置的顺序来自动分配一个被推荐的员工${this.$t('menu.BusinessCard')}`,
        2: `开启此功能后，员工可以在小程序端编辑${this.$t('menu.BusinessCard')}时切换职位，否则不能切换职位`,
        3: `开启此功能后，每个${this.$t('menu.BusinessCard')}生成的${this.$t('menu.BusinessCard')}码中的小程序图片会替换为该${this.$t('menu.BusinessCard')}的员工头像`,
        4: `${this.$t('menu.BusinessCard')}板式`,
        5: `${this.$t('menu.BusinessCard')}详情页面员工${this.$t('menu.BusinessCard')}信息展示方式`,
        6: `交换${this.$t('menu.BusinessCard')}`,
        7: `客户进入员工${this.$t('menu.BusinessCard')}后是否弹出交换${this.$t('menu.BusinessCard')}窗口`,
        8: `员工${this.$t('menu.BusinessCard')}是否显示个性签名栏目`,
        9: `开启我的${this.$t('menu.Dynamic')}后，会在${this.$t('menu.BusinessCard')}详情页面展示我的${this.$t('menu.Dynamic')}列表(默认展示3条${this.$t('menu.Dynamic')}数据)`,
        10: `此开关只能控制客户端首页的聊天功能，关闭后客户进入员工${this.$t('menu.BusinessCard')}将看不到与聊天相关的功能，用于通过微信审核`,
        11: `客户端首页咨询按钮文字`,
        12: `${this.$t('menu.BusinessCard')}详情页分享按钮自定义文字`,
        13: `${this.$t('menu.BusinessCard')}详情页交换手机号自定义文字`,
        14: `我的${this.$t('menu.Dynamic')}`,
        15: `开启后，客户端除${this.$t('menu.BusinessCard')}详情页面外，其他所有页面涉及的聊天都采用小程序客服系统；员工端依旧采用系统自带的聊天系统`,
        16: `例如：修改成【单位】，${this.$t('menu.BusinessCard')}详情页【公司名称】将替换为【单位名称】；创建/编辑${this.$t('menu.BusinessCard')}页面的【公司】也要改为此处设置的内容`
      },
      cardFrom: {
        force_phone: 0,
        preview_switch: 0,
        card_type: 0,
        exchange_switch: 0,
        motto_switch: 0,
        btn_consult: '',
        im_consult: '',
        share_btn: '',
        exchange_btn: '',
        qr_avatar_switch: '0',
        auto_switch: 0,
        auto_switch_way: 1,
        job_switch: 0,
        auth_switch: 0,
        chat_switch: 0,
        im_type: 0,
        dynamic_switch: 0,
        company_field: ''
      },
      cardFromRules: {
        action: { required: true, message: '请选择', trigger: 'change' },
        force_phone: { required: true, message: '请选择', trigger: 'change' },
        preview_switch: { required: true, message: '请选择', trigger: 'change' },
        dynamic_switch: { required: true, message: '请选择', trigger: 'change' },
        card_type: { required: true, message: '请选择', trigger: 'change' },
        exchange_switch: { required: true, message: '请选择', trigger: 'change' },
        motto_switch: { required: true, message: '请选择', trigger: 'change' },
        btn_consult: { required: true, message: '请输入聊天按钮文案', trigger: 'blur' },
        im_consult: { required: true, message: '请输入客服按钮文案', trigger: 'blur' },
        share_btn: { required: true, message: '请输入名片分享按钮文案', trigger: 'blur' },
        company_field: { required: true, message: '请输入公司文案', trigger: 'blur' },
        exchange_btn: { required: true, message: '请输入交换手机号', trigger: 'blur' },
        qr_avatar_switch: { required: true, message: '请选择', trigger: 'change' },
        auto_switch: { required: true, message: '请选择', trigger: 'change' },
        auto_switch_way: { required: true, message: '请选择', trigger: 'change' },
        job_switch: { required: true, message: '请选择', trigger: 'change' },
        auth_switch: { required: true, message: '请选择', trigger: 'change' },
        chat_switch: { required: true, message: '请选择', trigger: 'change' },
        im_type: { required: true, message: '请选择', trigger: 'change' }
      }
    }
  },
  created () {
    this.editOrGetFormInfo(0)
  },
  methods: {
    getUploadImg (img) {
      this.cardFrom.vr_cover = img
    },
    /**
     * @method 获取表单信息、编辑信息
     */
    editOrGetFormInfo (flag) {
      let { cardFrom } = this
      let queryForm = JSON.parse(JSON.stringify(cardFrom))
      if (flag === 1) { // 编辑
        this.$refs['cardFrom'].validate(valid => {
          if (valid) {
            queryForm.action = 'edit'
            queryForm.vr_cover = queryForm.vr_cover.length > 0 ? queryForm.vr_cover[0].url : ''
            this.handleAjaxForm(queryForm, flag)
          } else {
            this.$message.error(this.$t('tips.fillValidate'))
          }
        })
      } else {
        this.handleAjaxForm(queryForm, flag)
      }
    },

    /**
     * @method 处理表单回显和提交
     */
    handleAjaxForm (formInfo, flag) {
      if (flag !== 1) { formInfo = '' }
      this.$api.editOrGetCardInfo(formInfo).then(res => {
        if (res.code === 200) {
          if (flag !== 1) {
            let { data } = res
            data.vr_cover = data.vr_cover ? [{ url: data.vr_cover }] : ''
            this.cardFrom = { ...data }
          } else {
            this.$message.success(this.$t('tips.successSub'))
          }
        }
      })
    },

    /**
     * @method 重置表单
     */
    resetForm () {
      this.$refs['cardFrom'].resetFields()
    },
    /**
     * @method 获取封面图
     */
    getVRCover (img) {
      this.cardFrom.vr_cover = img
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-card-setting {
  width: 100%;
  .page-main {
    .card-form {
      .el-input {
        width: 300px;
      }
    }
  }
}
</style>
